<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>

	<style>
		*{
			margin:0;
			padding:0;
		}
		ul.menu{
			
			background-color:#cccccc;
			width:700px;
			height:60px;
			position:absolute;
			left:50px;
			top:50px;
			overflow:hidden;
			padding-left:20px;
		}
		
		ul.menu li{
			margin-top:15px;
			background-color:#ffffff;
			overflow:hidden;		
			height:30px;	
			float:left;		
		}
		
		ul.menu li div{		
			position:relative;
		}
			
	</style>
	
	<script  type="text/javascript"  src="../libs/jquery-1.7.1.min.js"> </script>
	<script  type="text/javascript"  src="../libs/jquery.easing.1.3.js"></script>
	<script>
		
		$(document).ready(function(){		
			var $menuItem = $("ul.menu li");		
			$menuItem.bind("mouseleave",function(){		
				var $overItem = $(this).find("div");
				$overItem.stop();
				$overItem.animate({
					top: 0
				}, 
				200,"easeOutQuint");
			});
		
			$menuItem.bind("mouseenter",function(){
				var $overItem = $(this).find("div");
				$overItem.stop();
				$overItem.animate({
					top: -30,
				}, 
				200,"easeOutQuint");
			});
	    });	
	</script>

</head>

<body>
	<ul class="menu">
		<li>
			<div><img src="images/menu_1.png"></div>
		</li>
		<li >
			<div><img src="images/menu_2.png"></div>
		</li>
		<li>
			<div><img src="images/menu_3.png"></div>
		</li>
		</ul>
</body>
</html>
